<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        /* #container{height:100%}  */
        #container {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            margin-top: 30px;
        }
    </style>
    <!-- self xrmH3c67QNrlGUqyp3GyYPf2dpXuhEU8  --- aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6-->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=xrmH3c67QNrlGUqyp3GyYPf2dpXuhEU8">
        </script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(104.0698864405044, 30.57886276012554);
        // 创建点坐标 
        map.centerAndZoom(point, 17);
        // 初始化地图，设置中心点坐标和地图级别 enableScrollWheelZoom()
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
        map.addControl(navi3DCtrl);
        // 创建城市选择控件
        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);

        //点击事件
        map.addEventListener('click', function (event) {
            console.log('被点击', event.latlng.lng, event.latlng.lat);
        });

        //创建点对象
        var point = new BMapGL.Point(标注添加位置的经度, 标注添加位置的纬度);
        //创建标注对象
        var marker = new BMapGL.Marker(point);
        //将标注点添加到地图上
        map.addOverlay(marker);

        MediaEncryptedEvent.addEventListener('事件名称', function (event) {
        });
        marker.addEventListener('dragend', function (event) {
            console.log('拖拽', event.latLng.lng, event.latLng.lat);
        })

        map.enableDragging();
    </script>
</body>

</html>